//复选框样式
.el-checkbox {
  --el-checkbox-checked-input-border-color: rgba(0, 92, 230, 1) !important;
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: rgba(0, 92, 230, 1) !important;
  }

  .el-checkbox__inner {
    // width: pxTvw(21);
    // height: pxTvh(21);
  }

  .el-checkbox__label {
    @include computed_font(14);
  }
}

.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: #a3b4cc !important;
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-width: 100%;
  --el-disabled-bg-color: #19284d;
  --el-disabled-border-color: none;
  --el-component-size: pxTvh(40);
}
.el-input__inner {
  height: calc(pxTvh(40) - 2px) !important;
  line-height: calc(pxTvh(40) - 2px) !important;
}
//单选框radio
.el-radio {
  .el-radio__label {
    @include computed_font(14);
    color: #c3ced5 !important;
  }

  .el-radio__inner::after {
    width: 8px;
    height: 8px;
    background-color: #2275f0;
  }
}

//进度条样式
.el-progress {
  width: 100%;
  height: pxTvh(12);

  .el-progress-bar {
    .el-progress-bar__outer {
      height: pxTvh(12) !important;
      background: linear-gradient(270deg, #52b0ff 0%, #266efd 100%);
      border-radius: 0;
    }
  }
}

//表格样式
.el-table {
  --el-table-header-bg-color: #243458 !important;
  --el-table-header-text-color: #bed3e6 !important;
  --el-table-tr-bg-color: transparent !important;
  --el-table-border-color: #2d3e65 !important;
  --el-table-text-color: #d3dfff !important;
  --el-table-row-hover-bg-color: #2a49a0 !important;
  --el-table-bg-color: transparent !important;
  // --el-table-row-hover-color:#D3DFFF !important;
  // --el-table-header-row-bg-color:#243458 !important;
  // --el-table-header-row-text-color:#BED3E6 !important;
  // --el-table-header-cell-bg-color:#243458 !important;
  @include computed_font(14);
  thead {
    height: 48px;
  }
  .cell {
    padding: 0 pxTvw(18) !important;
    height: 32px;
    @include elasticFN(flex-start, center);
  }
}

//form表单样式
.el-form {
  color: rgba(107, 116, 143, 1);
  @include computed_font(14);

  .el-form-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: pxTvh(0);
  }

  .el-form-item__content {
    @include computed_font(14);
    .el-form-item__error {
      padding-top: 4px;
    }
  }
}

//按钮样式
.el-button > span {
  @include computed_font(14);
  font-family: PingFang SC, PingFang SC;
}

.el-button {
  --el-button-text-color: #377dff !important;
  --el-button-hover-text-color: #4b98fa !important;
  --el-button-hover-border-color: #4b98fa !important;
  --el-button-active-text-color: #154ed1 !important;
  --el-button-active-border-color: #154ed1 !important;
  --el-button-font-weight: 400 !important;
}

.el-button.is-plain {
  --el-button-border-color: rgba(38, 110, 253, 1);
  --el-button-bg-color: #fff;
  --el-button-text-color: rgba(38, 110, 253, 1);
  --el-button-hover-bg-color: rgba(51, 133, 255, 0.08) !important;
  --el-button-active-border-color: rgba(0, 71, 178, 1);
  --el-button-active-text-color: rgba(0, 71, 178, 1) !important;
}

.el-button--primary {
  --el-button-bg-color: #165dff !important;
  --el-button-text-color: #fff !important;
  --el-button-hover-text-color: #fff !important;
  --el-button-active-text-color: #fff !important;
  --el-button-hover-bg-color: #2275f0 !important;
  --el-button-active-bg-color: #154ed1 !important;
  border: none !important;
}

.el-button--primary.is-link {
  --el-button-text-color: rgba(38, 110, 253, 1) !important;
  --el-button-hover-link-text-color: rgba(51, 133, 255, 1);
  --el-button-active-text-color: rgba(0, 71, 178, 1) !important;
}

//分页器样式
.el-pagination.is-background .el-pager li {
  background-color: transparent;
}

.el-pagination.is-background .btn-prev:disabled {
  background-color: transparent !important;
}

.el-pagination {
  justify-content: flex-end;
}

//数字输入框
.el-input-number {
  .el-input__wrapper {
    padding-left: pxTvw(10);
    padding-right: 0;

    .el-input__inner {
      width: pxTvh(54);
      text-align: left;
    }
  }
}

.el-input-number__decrease {
  background: none !important;
}

.el-input-number__increase {
  background: none !important;
}

//树
.el-tree {
  .el-tree-node__content {
    color: #191d32;
    font-weight: 400;
    font-family: PingFang SC, PingFang SC;

    &:hover {
      background-color: rgba(0, 92, 230, 0.2);
      // opacity: 0.2;
      border-radius: 2px;
      color: #191d32;
    }

    &:hover .el-tree-node__label {
      color: #191d32;
    }
  }

  .el-tree-node__children {
    .el-tree-node__label {
      color: #6b748f;
    }
  }
}

.el-collapse {
  --el-collapse-border-color: #a3b4cc;

  .el-collapse-item {
    border: 1px solid #a3b4cc !important;
    border-radius: 4px;
  }

  .el-collapse-item__wrap {
    padding: pxTvh(16) pxTvw(16) pxTvh(16) pxTvw(16);
  }

  .el-collapse-item__header.is-active {
    border-bottom: 1px solid #a3b4cc !important;
  }

  .el-collapse-item__header {
    border-radius: 4px;
  }
}

.custom-el-plus {
  --el-font-size-base: pxTvw(14);
  $el-input-bg-color: #19284d;
  .el-button {
    height: pxTvh(40);
  }
  .el-form {
    display: flex;
    .el-input,
    .el-date-editor,
    .el-select,
    .el-button {
      height: pxTvh(40);
    }

    .el-form-item__label {
      color: rgba(190, 211, 230, 0.6);
      padding: 0 pxTvw(16) 0 0;
    }
  }
  .el-table {
    .el-table__cell {
      // padding: pxTvh(12) 0;
    }
  }
  .el-date-editor {
    --el-fill-color-blank: #19284d;
    --el-text-color-primary: #a8abb2;
    --el-date-editor-width: 340px;
    --el-text-color-regular: #cfdbfc;
    .el-input__wrapper {
      padding: 1px pxTvw(8);
      .el-input__prefix {
        position: absolute;
        right: pxTvw(10);
      }
    }
  }

  .el-date-editor.el-input__wrapper,
  .el-date-editor.el-input__wrapper:hover,
  .el-date-editor.el-input__wrapper:active {
    border-radius: 0;
    box-shadow: none;
  }
  .el-input {
    --el-input-bg-color: #19284d;
    --el-input-border-color: transparent;
    .el-input:hover input {
      border-color: initial;
      box-shadow: none;
    }

    .el-input__wrapper {
      box-shadow: none;
      border-radius: 0;
      &:hover {
        background-color: #19284d;
        border: none;
        box-shadow: none;
      }

      &:focus {
        background-color: #19284d;
        border: none;
      }
    }
    .el-input__wrapper.is-focus {
      box-shadow: 0 0 0 1px #165dff inset !important;
    }
    .el-input__inner {
      color: #cfdbfc;
    }
  }

  .el-input-group__append {
    .el-button {
      background-color: #19284d;
      border-radius: 0;
    }

    .el-button:hover {
      background-color: #19284d;
      box-shadow: none;
    }
  }

  .el-textarea {
    .el-input__count {
      background-color: transparent;
    }
  }
  .el-textarea.is-disabled .el-textarea__inner {
    box-shadow: none;
    background-color: #19284d;
    color: #cfdbfc;
  }

  .el-textarea__inner {
    resize: none;
    --el-input-bg-color: #19284d;
    box-shadow: none;
    color: #cfdbfc;
    height: pxTvh(40);
    line-height: 1.82;
    &:hover {
      box-shadow: none;
    }

    &:focus {
      box-shadow: none;
    }
  }

  .el-pagination.is-background {
    --el-disabled-text-color: #a8d6ff;
    --el-text-pag-color: rgba(195, 206, 213, 1);
    --el-text-pag-active-color: rgba(22, 93, 255, 1);
    --el-border-pag-color: rgba(255, 255, 255, 0.2);
    --el-pagination-back-color: transparent;
    --el-pagination-back-disabled-color: rgba(245, 247, 250, 0.5);
    width: 100%;
    justify-content: flex-end;
    padding: 0;

    button {
      height: pxTvh(32);
      line-height: pxTvh(32);
      @include computed_font(14);
      background-color: var(--el-pagination-back-color);
      color: var(--el-text-pag-color);
      margin: 0 3px;
    }

    button:disabled {
      color: var(--el-text-pag-color);
      background-color: var(--el-back-color);
      backdrop-filter: blur(5px);
    }

    .el-pagination__sizes {
      height: pxTvh(32);

      .el-input__inner {
        height: pxTvh(32);
      }
    }

    .el-pager li {
      min-width: pxTvw(32);
      width: auto;
      height: pxTvh(32);
      line-height: pxTvh(32);
      @include computed_font(14);
      background-color: transparent;
      border: 1px solid transparent;
      color: var(--el-text-pag-color);
    }

    .el-pager li:not(.is-disabled).is-active {
      background-color: var(--el-text-pag-active-color);
      font-weight: 400;
      border: 1px solid var(--el-pagination-back-color);
      color: #81b9dd;
    }
    .el-pager li:not(.is-active):hover {
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #165dff;
      background-color: transparent;
      color: #165dff;
    }

    .el-pagination__jump {
      color: var(--el-text-pag-color);
      height: pxTvh(32);
      line-height: pxTvh(32);
      @include computed_font(14);

      .el-pagination__editor {
        min-width: pxTvw(32);
        width: pxTvw(32);
        height: pxTvh(32);
        line-height: pxTvh(32);

        .el-input {
          margin: 0 pxTvw(4);
        }

        .el-input__wrapper {
          padding: 0;
        }

        .el-input__inner {
          height: pxTvh(32);
          border-radius: 2px;
          background: none;
          padding: 0;
        }
      }
    }

    .el-input--small .el-input__wrapper {
      padding: 0;
    }

    .el-pagination__total {
      color: #c3ced5;
      @include computed_font(14);
    }
  }

  .el-select {
    --el-select-border-color-hover: none;
    --el-border-color-hover: #165dfe;
    .el-select__wrapper {
      --el-fill-color-blank: #19284d;
      // border-radius: 0 !important;
      // height: 100%;
      min-height: pxTvh(40);
      width: pxTvw(120);
      background-color: var(--el-fill-color-blank);
      color: #cfdbfc;
      box-shadow: none;
      @include computed_font(14);
    }
    .el-select__placeholder span {
      color: #cfdbfc;
    }
  }

  .el-slider {
    --el-slider-height: 4px;
    --el-slider-runway-bg-color: #36456a;
    --el-slider-main-bg-color: #2275f0;
    .el-slider__bar {
      background-color: #2275f0;
    }

    .el-slider__button {
      --el-slider-button-size: 12px;
      border-color: #2275f0;
    }
  }

  .el-slider__input {
    width: pxTvw(80);

    & > span {
      display: none;
    }

    .el-input {
      width: pxTvw(80);

      .el-input__wrapper {
        width: 100%;
        padding: 0 pxTvw(10);
      }
    }
  }

  .el-radio-group {
    .el-radio__inner {
      //   --el-radio-input-height: pxTvw(16);
      //   --el-radio-input-width: pxTvw(16);
      //   border-radius: none;
    }
  }

  .el-dialog {
    background-color: #0d172f;
    padding: 0 0 pxTvh(16) 0;

    .el-dialog__header {
      border-bottom: 1px solid rgba(82, 92, 118, 0.3);
      padding: 0 pxTvh(16) pxTvh(0) pxTvh(16);
      height: pxTvh(56);
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .el-dialog__title {
        color: #fff;
        @include computed_font(16);
      }

      .el-dialog__close {
        color: #fff;
        @include computed_font(16);
      }
      .el-dialog__headerbtn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: pxTvh(56);
      }
    }
  }

  .el-overlay {
    backdrop-filter: blur(10px);
  }

  .el-upload {
    // height: 100%;
    height: pxTvh(168);

    .el-upload-dragger {
      height: 100%;
      border: none;
      background-color: #19284d;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .el-upload__text {
        color: #cfdbfc;
        margin-top: pxTvh(10);
      }
    }
  }

  .el-upload-list {
    margin: 5px 0 0;

    .el-upload-list__item:hover {
      background-color: #19284d;
    }
  }

  .el-button {
    --el-button-bg-color: transparent;
    --el-button-hover-bg-color: transparent;
    border: 1px solid #377dff;
    padding-left: pxTvw(23);
    padding-right: pxTvw(23);
    height: pxTvh(40);
  }
  .el-tag.is-closable {
    background: #283e76;
    color: #cfdbfc;
  }

  .el-tag .el-tag__close {
    color: #cfdbfc;
  }

  .el-tag.el-tag--info {
    background: #283e76;
    color: #cfdbfc;
  }

  .el-input.is-disabled .el-input__wrapper {
    background-color: rgba(25, 40, 77, 0.5);
    box-shadow: 0 0 0 0px;
  }
  .el-switch--small .el-switch__core {
    border-radius: pxTvw(13);
  }
}

.custom-query-select {
  background-color: #19284d !important;
  --el-border-color-light: #19284d !important;
  --el-fill-color-light: #2a49a0;
  margin-top: pxTvh(-6);
  // .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
  //   background-color: #2275f0 !important;
  // }
  .el-popper__arrow {
    display: none;
  }

  .el-select-dropdown__item {
    color: #bed3e6;
    margin: 0 pxTvw(4);
    border-radius: 2px;
    padding: 0 pxTvw(32) 0 pxTvw(7);
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #2a49a0;
  }
  .el-select-dropdown__item.is-selected {
    color: #bed3e6;
  }
}
.custom-query-select.is-multiple {
  .el-select-dropdown__header {
    padding: 4px 11px;
    border-bottom: 1px solid #283e76;
    .el-checkbox {
      color: #7f8fab;
      .el-checkbox__inner {
        border: 1px solid #757d8b;
      }
    }
    .el-checkbox.is-checked {
      .el-checkbox__inner {
        background-color: #2275f0 !important;
        border-color: #2275f0;
      }
      .el-checkbox__label {
        color: #dceafe;
      }
    }
  }
  .el-select-dropdown__wrap {
    .el-select-dropdown__item {
      color: #7f8fab;
    }
    .el-select-dropdown__item.is-selected {
      color: #dceafe;
      font-weight: normal;
    }
    .el-select-dropdown__item.is-selected:after {
      display: none;
    }
    .el-select-dropdown__item .check {
      display: inline-block;
      position: relative;
      top: 2px;
      border: 1px solid #757d8b;
      border-radius: 2px;
      box-sizing: border-box;
      width: 14px;
      height: 14px;
      background-color: transparent;
      z-index: 1;
      transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
    }
    .el-select-dropdown__item.is-selected .check {
      background-color: #2275f0;
      border-color: #2275f0;
    }
    .el-select-dropdown__item.is-selected .check::after {
      transform: rotate(45deg) scaleY(1);
    }
    .el-select-dropdown__item .check::after {
      box-sizing: content-box;
      content: '';
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      transform: rotate(45deg) scaleY(0);
      width: 3px;
      transition: transform 0.15s ease-in 0.05s;
      transform-origin: center;
    }
  }
}

.search-text {
  margin-top: pxTvh(-11);

  .el-popper__arrow {
    display: none !important;
  }

  &.el-popper {
    border-radius: 0;
  }
}

.mult-select-popper {
  margin-top: pxTvh(-6);
  &.el-popper {
    border-radius: 4px;
  }
}

.el-popper.is-light {
  border: 0 solid #fff !important;
}
.el-popper.is-dark {
  --el-text-color-primary: #3153A2 !important;
  --el-bg-color: #D3DFFF !important;
  padding: 4px 16px;
}
.el-popper.is-light {
  .el-popper__arrow:before {
    background: #102644 !important;
  }
}
.el-autocomplete {
  .el-input__wrapper {
    width: pxTvh(250);
    box-sizing: border-box;
  }
}
.el-autocomplete__popper.el-popper {
  border: 0 solid #fff !important;
}

.el-autocomplete-suggestion__wrap {
  --el-font-size-base: pxTvw(14);
  --el-text-color-regular: #bed3e6;

  li {
  }
}

.custom-select-input {
  & > .el-select--small .el-select__wrapper {
    background: rgba(95, 146, 247, 0.2);
    box-shadow: 0 0 0 0;
  }
  .el-select__wrapper:hover {
    box-shadow: 0 0 0 0 !important;
  }

  .el-select__placeholder {
    color: #d3dfff;
  }
}

.el-popper {
  --el-datepicker-inrange-hover-bg-color: #19284d;

  .el-date-range-picker__time-picker-wrap {
    --el-input-bg-color: #19284d;
    --el-fill-color-blank: #19284d;
  }

  .el-picker-panel {
    --el-text-color-regular: #7481a4;
    .el-date-range-picker__time-header {
      .el-input__wrapper {
        box-shadow: none;
        background-color: #283e76;
        .el-input__inner {
          color: #a5adba;
        }
      }
    }

    .el-icon {
      color: #d3dfff;
    }

    .el-picker-panel__footer {
      .el-button {
        border: 1px solid #377dff;
        box-sizing: border-box;
      }

      .el-button.is-plain {
        color: #fff;
        background-color: #2275f0;
      }

      .el-button.is-text:not(.is-disabled):hover {
        background-color: transparent;
        border: 1px solid #377dff;
        color: #377dff;
      }
    }
    .el-date-table {
      --el-datepicker-active-color: #2275f0;
      --el-input-bg-color: #19284d;
      th {
        border-bottom: none;
      }
      td .el-date-table-cell {
        color: #aab7d9;
      }
      td.next-month,
      td.prev-month {
        color: #a8abb2 !important;
        --el-datepicker-off-text-color: #a8abb2 !important;
      }
      td.disabled .el-date-table-cell {
        background-color: transparent !important;
        color: rgba(170, 183, 217, 0.5);
      }

      td.in-range {
        .el-date-table-cell {
          color: #e6eaf0;
          background-color: #283e76 !important;
        }
      }
    }

    .el-time-panel {
      --el-text-color-primary: #a8abb2 !important;
      --el-fill-color-light: #283e76 !important;
      border: 1px solid #2a49a0;
      border-radius: 2px;
      // .el-time-spinner__wrapper:first-child {
      //   .el-time-spinner__item {
      //     margin: 2px 1px 2px 2px;
      //   }
      // }
      // .el-time-spinner__wrapper:last-child {
      //   .el-time-spinner__item {
      //     margin: 2px 2px 2px 1px;
      //   }
      // }

      .el-time-panel__btn {
      }

      .el-time-spinner__item.is-active:not(.is-disabled) {
        color: #2275f0 !important;
        background-color: #283e76;
      }
    }
  }
}

.el-checkbox {
  .el-checkbox__inner {
    background-color: transparent;
    border: 1px solid #757d8b;
  }
}

.el-radio__input .el-radio__inner {
  background-color: transparent !important;
  border: 1px solid #757d8b !important;
}

.el-switch.is-checked .el-switch__core {
  background-color: #165dff !important;
  border-color: #165dff !important;
}

.el-select__selection .el-tag {
  background: #283e76;
  color: #cfdbfc;
}

.el-tag .el-tag__close {
  color: #cfdbfc;
}

.data-analysis {
  .el-form-item {
    .el-select__wrapper {
      width: pxTvw(200) !important;
    }
  }
}

.el-message-box {
  --el-bg-color: #1d2a4b;
  --el-text-color-regular: #fff;
}

.el-popper.is-dark {
  background: #3153a2 !important;
  border: none;
}
.el-popper__arrow::before {
  background: #3153a2 !important;
}
